<template>
  <div>
    <titleTop :titleTxet="titleTxet"></titleTop>
    <div class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>头像</span>
      </div>
      <div class="img_box">
        <img
          :src="info.avatar"
          alt=""
        >
        <div v-if="info.is_auth==0?false:true" class="real real_box real_box1">
          <img class="xiabiao" src="../../../assets/img/real.png" alt="">
        </div>
      </div>

    </div>
    <div @click="setname()" class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>昵称</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.user_login}}</span>
      </div>
    </div>
    <router-link to="/mySetPhone" class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>绑定手机号</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.mobile}}</span>
      </div>
    </router-link>

    <div @click="show111()" class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>出生年月</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.birthday}}</span>
      </div>
    </div>
    <div @click="show6()" class="container flex f_align f_bet b_d p_t p_d">
      <div class="font_32 f_w c_28">
        <span>所在地</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.location}}</span>
      </div>
    </div>
    <router-link
      to="/mySignature"
      class="container flex f_align f_bet b_d p_t p_d"
    >
      <div class="font_32 f_w c_28">
        <span>个性签名</span>
      </div>
      <div class="w2 font_28 c_8c t_right">
        <span>{{info.signature}}</span>
      </div>
    </router-link>

    <!--提交按钮-->
    <div class="button" @click="finis2()">保存</div>
    <!--出生年月-->
    <van-popup v-model="show1" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="出生年月"
        :min-date="minDate"
        @confirm="onconfirm1($event)"
        @cancel="oncancel1"
      />
    </van-popup>
    <!--所在地-->
    <van-popup v-model="show5" position="bottom">
      <van-area :area-list="areaList" title="选择所在地" value="110101" @confirm="onconfirm5($event)" @cancel="oncancel5"/>
    </van-popup>
  </div>
</template>

<script>
  import {Dialog} from 'vant';
import areaList from '../../../areaList'
import titleTop from "../../com/title";
import * as common from "../../../api/common.js";
export default {
  components: { titleTop },
  data() {
    return {
      areaList:areaList,
      show1:false,
      currentDate: new Date(),
      minDate:new Date(1950,0,1),
      show5:false,
      titleTxet: {
        titleName: "个人中心",
        IsBool: true,
        IsShare: false
      },
      info: {
        avatar: '',
        user_login: "",
        mobile: "",
        birthday: "",
        location: "",
        signature: "",
        is_auth:''
      }
    };
  },
  beforeMount(){
    let useid = {user_id:this.$store.state.user_id};
    common.userinfo(useid).then(res=>{
        console.log(res);
        this.info.avatar = res.data.avatar;
        this.info.user_login = res.data.user_login;
        this.info.mobile = res.data.mobile;
        this.info.birthday = res.data.birthday;
        this.info.location = res.data.location;
        this.info.signature = res.data.signature;
        this.$store.commit('getsin',res.data.signature);
        this.info.is_auth = res.data.is_auth;
    })
  },
  mounted(){
    mui.back = function() {
      window.history.go(-1);
    }
  },
  methods: {
    setname(){
      this.$router.push({
        path:'/setname',
        query:{
          cont:this.info.user_login
        }
      })
    },
    show111(){
      this.show1 = true;
    },
    onconfirm1(e){
      var date = new Date(e);
      this.info.birthday = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      this.show1 = false;
    },
    oncancel1(){
      this.show1 = false;
    },
    show6(){
      this.show5 = true;
    },
    onconfirm5(e){
      this.info.location = e[0].name+' '+e[1].name+' '+e[2].name;
      this.show5 = false;
    },
    oncancel5(){
      this.show5 = false;
    },
    finis2(){
      let parms5 = {
        user_id:this.$store.state.user_id,
        birthday:this.info.birthday,
        location:this.info.location
      };
      common.change_userinfo(parms5).then(res=>{
        console.log(res);
        if (res.status==200) {
          Dialog.alert({
            message: res.msg
          });
          history.go(-1);
        }
      })
    }
  }
};
</script>

<style scoped>
.img_box {
  width: 86px;
  height: 86px;
  position: relative;
}
.img_box img {
  width: 86px;
  height: 86px;
  border-radius: 10px;
}
.img_box .xiabiao{
  width: 20px;
  height: 20px;
}
.p_t {
  padding-top: 32px;
}
.p_d {
  padding-bottom: 32px;
}
.sub-btn {
  width: 400px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
  background: #884ca4;
  border-radius: 10px;
  margin-top: 300px;
}
.sub-btn span{
  color: #fff;
}
.real {
  position: absolute;
  right: -4px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  z-index: 2;
  border-radius: 50%;
  text-align: center;
}
.real_box {
  background: #8c8c8c;
}
.real_box1 {
  background: #ffc240;
}

.button{
  width: 200px;
  height: 80px;
  margin: 80px auto 0;
  background: #884ca4;
  color: #fff;
  font-size: 32px;
  line-height: 80px;
  text-align: center;
  border-radius: 10px;
}
</style>
